// 该组件为通用表格搜索组件，被多个页面复用，已归类到 common 目录
<template>
  <div class="search-container">
    <el-form ref="searchRef" :model="query!" :inline="true" @submit.prevent @keyup.enter="search">
      <el-form-item v-for="item in options" :key="item.prop" :label="item.label" :prop="item.prop">
        <slot :name="item.prop" :query="query!">
          <!-- 文本框、下拉框、日期框 -->
          <el-input
            v-if="item.type === 'input'"
            v-model="query![item.prop] as string"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            clearable
          ></el-input>
          <el-select
            v-else-if="item.type === 'select'"
            v-model="query![item.prop] as string"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            clearable
          >
            <el-option
              v-for="opt in item.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            ></el-option>
          </el-select>
          <el-date-picker
            v-else-if="item.type === 'date'"
            v-model="query![item.prop] as Date"
            type="date"
            :value-format="item.format"
          ></el-date-picker>
        </slot>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="search">搜索</el-button>
        <el-button :icon="Refresh" @click="resetForm(searchRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import { FormInstance } from 'element-plus'
  import { Refresh, Search } from '@element-plus/icons-vue'
  import { PropType, ref } from 'vue'
  import { FormOption } from '@/types/form-option'

  // 显式指定 query 类型，消除 linter 报错
  const query = defineModel<Record<string, unknown>>('query')

  const props = defineProps({
    options: {
      type: Array as PropType<Array<FormOption>>,
      required: true,
    },
    search: {
      type: Function as PropType<() => void>,
      default: () => () => {},
    },
  })

  const searchRef = ref<FormInstance>()
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    props.search()
  }
</script>

<style scoped>
  .search-container {
    padding: 20px 30px 0;
    background-color: #fff;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  /*noinspection CssUnusedSymbol*/
  .el-select {
    min-width: 170px;
  }
</style>
